<template>
    <table id="sam" cellspacing="1" style="width: 100%;height: 100px;border: 1px solid #a8aeb2;">
        <tr class="tr" v-for="sams in labRecordSamList">
            <th v-for="sam in sams.itemsRecordSampleList"
                :class="{ 'thA': sam.fieldInput === '0', 'thB': sam.fieldInput === '1' }"
                :rowspan="sam.fieldRowspan > 0 ? sam.fieldRowspan : 1"
                :colspan="sam.fieldColspan > 0 ? sam.fieldColspan : 1" style="width: 55px; overflow: hidden;">

                <span v-if="sam.fieldInput === '0'">{{ sam.fieldName }}</span>
                <div v-else-if="sam.fieldInput === '1'">
                    <!-- <a-input :name="sam.fieldCode" v-if="sam.fieldCode === 'check_basis' && sam.fieldValue !== null" v-model:value="sam.fieldValue"
                    size="large" class="input" >  -->
                    <!-- </a-input> -->
                    <span v-if="sam.fieldCode === 'check_basis' && sam.fieldValue !== null" style="width: 40px;">
                        <span v-for="(item, index) in sam.fieldValue.split(',')" :key="index" @click="fileView(item, index)"
                            style="color: green;text-decoration: underline; cursor: pointer;display: block;">
                            {{ item }}
                        </span>
                    </span>
                    <a-input :name="sam.fieldCode" v-else v-model:value="sam.fieldValue" size="large"
                        class="input" :disabled="true"></a-input>
                </div>
            </th>
        </tr>
    </table>
</template>
  
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { defineProps } from 'vue';
import { defHttp } from '/@/utils/http/axios';
import { useUserStore } from '/@/store/modules/user';

const userStore = useUserStore();
const props = defineProps<{
    labRecordSamList?: [{
        sId: string | number,
        itemsRecordSampleList: [{
            id: string | number,
            createBy: string,
            createTime: string,
            updateBy: string,
            updateTime: string,
            sysOrgCode: string,
            taskId: string,
            itemId: string,
            fieldName: string,
            fieldCode: string,
            fieldValue: string,
            fieldInput: string | number,
            fieldSort: number,
            fieldType: string,
            fieldRow: number,
            fieldCol: number,
            fieldRowspan: number,
            fieldColspan: number,
        }]
    }]
}>();


const fieldList = ref([])
const txtName = ref();
const itemId = ref();
//查询实验标准
function fileView(value, index) {
    //拿到项目id
    itemId.value = props.labRecordSamList[0].itemsRecordSampleList[0].itemId;
    defHttp.get({ url: '/ibasis/labItemsBasis/getOne?name=' + value + '&itemId=' + itemId.value }).then((res) => {
        //找到对应实验项目的试验标准
        if (res.atta.includes(',')) {
            res.atta.split(',').forEach(item => {
                fieldList.value.push(item.split('/')[1]);
            });
        } else {
            fieldList.value.push(res.atta.split('/')[1]);
        }
        txtName.value = fieldList.value[index];
        openView();
    })
};
//打开预览页面10.89.208.24
function openView() {
    window.open(
        'http://10.89.208.24:9999/utensil/office/view'
        + '?documentName=' + txtName.value
        + '&loadType=view'
        + '&documentDownloadUrl=' + "http://10.89.208.24:9999/sys/common/static/temp/" + txtName.value
        + '&username=' + userStore.userInfo?.realname
    )
}


defineExpose({
    props,
});

</script>
  
<style scoped>
.tr {
    height: 50px;
    border: 1px solid #a8aeb2;
}

.thA {
    width: 20%;
    text-align: center;
    border: 1px solid #a8aeb2;
    font: 1.2em sans-serif;
}

.thB {
    text-align: center;
    border: 1px solid #a8aeb2;
    font: 1.2em sans-serif;
}

.input {
    width: 100%;
    height: 100%;
    border: none;
    background-color: inherit;
    outline: none;
    border-bottom: none;
}
</style>